<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('库存平面图')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body>
<div data-options="region:'north'">
    <fieldset style="border-color: #E7F0FF">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        <label>巷道：</label>
                        <select id="roadway" name="roadway" th:height="300px" onchange="changes()">

                        </select>
                    </li>
                    <li>
                        <label>排：</label>
                        <select id="platoon" name="platoon" style="width: 100px">
                            <option value="" selected>--请选择--</option>
                        </select>
                    </li>
                </ul>
            </div>
        </form>
        <a href="javascript:sc()" class="btn btn-primary btn-rounded btn-sm" iconCls="icon-search" plain="true">搜索</a>
    </fieldset>
</div>
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $.post("/device/basRoadway/list1",{warehouse_id:'01'},function(data){

            $("#roadway").append("<option value='1' selected >"+"--请选择--"+"</option>");
            // alert(data.rows[0].inOrOut);
            for(var i=0;i<data.total;i++){
                $("#roadway").append("<option value="+data.rows[i].roadway_id+">"+data.rows[i].roadway_name+"</option>");
            }
        });
    });
    var msg;
    $(document).ready(function () {
        // changes();
    });
    function changes() {
        var row = $("#roadway").val();
        $("#platoon").empty();

        for (var i = row * 2 -1; i < row * 2+1; i++) {
            $("#platoon").append("<option value=" + i + ">" + i + "排</option>");
        }
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        dataZoom: [ //给x轴设置滚动条
            {
                start: 0, //默认为0
                end: 1500,  //默认为100
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                height: 10, //组件高度
                left: 30, //左边的距离
                right: 0, //右边的距离
                bottom: 150, //右边的距离
                handleColor: '#ddd', //h滑动图标的颜色
                handleStyle: {
                    borderColor: "#cacaca",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowColor: "#ddd",
                },
                fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                }, {
                    offset: 1,
                    color: '#5ccbb1'
                }]),
                backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色
                showDataShadow: true, //是否显示数据阴影 默认auto
                showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
                handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                xAxisIndex: [0],
                start: 0, //默认为1
                end: 1500 //默认为100
            },
        ],
        title: {
            text: '库位分布平面图',
            subtext: '统计来自立体库'
        },
        tooltip: {
            show: true,
            trigger: 'item',
            formatter:function(params){
                $.post("/kpi/msg", {
                    platoon: $("#platoon").val(),
                    row:$("#roadway").val(),
                    column: params.data[0],
                    floor: params.data[1]
                }, function (result) {
                    msg = result.msg;
                }, "json");

                if(params.seriesName=="空位"){
                    var str=params.seriesName+"<br>"+$("#platoon").val()+"排"+(params.data[0] )+"列"+(params.data[1])+"层<br>"
                }else{
                    var str = params.seriesName + "<br>" + $("#platoon").val() + "排" + (params.data[0] ) + "列" + (params.data[1] ) + "层<br>" + msg;
                }
                return str
            }
        },
        grid: {
            width: "90%",
            x: "5%",
            height: '45%',
            y: "20%",
        },
        xAxis: {
            type: 'category',
            data: [],
            splitArea: {
                show: true
            }
        },
        yAxis: {
            type: 'category',
            data: [],
            splitArea: {
                show: true
            }
        },
        emphasis: {
            itemStyle: {
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
            },
        },
        itemStyle: {
            borderColor: "white	",
            borderWidth: "2",
        },
        legend: {
            data: ['空位', '满位', '入库分配', "出库分配", "入库需盘点", "出库需盘点"],
        },
        series: []
    };
    var empty = [];
    var full = [];
    var inAllot = [];
    var outAllot = [];
    var inCheck = [];
    var outCheck = [];
    var floor = [];
    var column = [];

    function sc() {
        var roadway = $("#roadway").val();
        var platoon = $("#platoon").val();

        $.ajax({
            "url": "/kpi/plan",
            "type": "POST",
            //"data": $("#form_search").serialize(),
            "data": {"roadway":roadway,"platoon":platoon},
            "dataType": "json",
            "success": function (json) {
                console.log(json)
                empty = json.emp;
                full = json.fu;
                inAllot = json.inAllot;
                outAllot = json.outAllot;
                inCheck = json.inCheck;
                outCheck = json.outCheck;
                floor = json.flo;
                column = json.col;
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    xAxis: {
                        data: column
                    },
                    yAxis: {
                        data: floor
                    },
                    series: [{
                        name: '空位',
                        type: 'heatmap',
                        data: empty,
                        color: "#AEEEEE",
                    }, {
                        name: '满位',
                        type: 'heatmap',
                        data: full,
                        color: "#ffbf80"
                    }, {
                        name: '入库分配',
                        type: 'heatmap',
                        data: inAllot,
                    }, {
                        name: '出库分配',
                        type: 'heatmap',
                        data: outAllot,
                    }, {
                        name: '入库需盘点',
                        type: 'heatmap',
                        data: inCheck,
                    }, {
                        name: '出库需盘点',
                        type: 'heatmap',
                        data: outCheck,
                    }]
                });

            }
        });
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>